<template>
	<view class="activityDetails">
		<!-- <view class="con2">
			<image class="con2-qrc" :src="codeImg" mode=""></image>
		</view> -->

		<view class="con1">
			<view class="con1-name"> {{info.username}} </view>
			<view class="con1-dp" @click="showRemarkFun()"> {{info.typeName}} </view>
		</view>
		<view class="con3" @click="jump('achievement')">
			业绩：{{info.achievement}}
		</view>
		<view class="list-box" v-for="(item,index) in info.extensionInfo" :key="index"
			@click="jump('spread_list', 'type='+item.type+'&title='+item.title)">
			<view class="list-left"> {{item.title}} </view>
			<view class="list-right"> {{item.num}}个 </view>
		</view>
        <view class="list-box" @click="jump('promote_apply')" v-if="info.spread_id == 0">
        	<view class="list-left"> 超圳商行 </view>
        	<view class="list-right"> 申请 </view>
        </view>
        <view class="list-box" @click="jump('spread_main', info.spread_id)" v-if="info.spread_id > 0">
        	<view class="list-left"> {{info.spread_title}} </view>
        	<view class="list-right"> 查看详情 </view>
        </view>
        <!-- <button type="default" style="background: #fff;width: 100%; margin: 0 0 20px 0; height:60px;" @click="showCodeFun()"> -->
        	<view class="sign" @click="showCodeFun()">{{selNav == 0 ? '展示' : '关闭'}}业务码</view>
        <!-- </button> -->
        <uni-popup ref="pickupCode">
        	<view class="pickupCode-box">
        		<view class="nav">
        			<view class="nav_item" @click="getnav(1)" >
        				<view :class="selNav == 1 ? 'nav_name hover' : 'nav_name'">
        					<text>一般商户类</text>
        				</view>
        			</view>
        			<view class="nav_item" @click="getnav(2)">
        				<view :class="selNav == 2 ? 'nav_name hover' : 'nav_name'">
        					<text>娱乐商户类</text>
        				</view>
        			</view>
                    <view class="nav_item" @click="getnav(3)" >
                    	<view :class="selNav == 3 ? 'nav_name hover' : 'nav_name'">
                    		<text>推广业务员</text>
                    	</view>
                    </view>
                    <view class="nav_item" @click="getnav(4)" >
                    	<view :class="selNav == 4 ? 'nav_name hover' : 'nav_name'">
                    		<text>推广批发商</text>
                    	</view>
                    </view>
        		</view>
        		<image class="img" :src="showCodeImg" ></image>
        		<view class="pickupCode-t">说明：</view>
        		<view style="padding:20rpx 40rpx">{{showRemark}}</view>
        	</view>
        </uni-popup>
		<uni-popup ref="typeRemark" type="center">
			<view class="">
				<oneButPopup title="业务等级说明" :content="info.type_ramark" butCon="确定" @determine="closeRemarkFun"></oneButPopup>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import uniQrcode from '../static/wxqrcode.js';
	import oneButPopup from '../uni_modules/oneButPopup/oneButPopup.vue';
	export default {
		components:{
			oneButPopup //弹出消息层
		},
		data() {
			return {
				bottomHeight: 110,
				/* 底部按钮高度，避免iPhonex导航黑条 */
				info: {
					username: '',
					typeName: '',
					codeUrl: '',
					achievement: 0.00,
					achievementMoney: 0.00,
					extensionInfo: [],
					spread_id: 0,
					spread_title: '',
					type_ramark: "",
				},
				codeImg1: '',
				codeImg2: '',
				codeImg3: '',
				codeImg4: '',
				showCodeImg: '',
				showRemark: '',
				selNav: 0,
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/spread/business/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					}
				}).then(res => {
					if (res.code == 200) {
						_self.info = res.data;
						console.info(_self.info.type_ramark);
						_self.codeImg1 = uniQrcode.createQrCodeImg(_self.info.codeUrl1, {
							size: parseInt(200)   
						});
			            _self.codeImg2 = uniQrcode.createQrCodeImg(_self.info.codeUrl2, {
			            	size: parseInt(200)   
			            });
			            _self.codeImg3 = uniQrcode.createQrCodeImg(_self.info.codeUrl3, {
			            	size: parseInt(200)   
			            });
						_self.codeImg4 = uniQrcode.createQrCodeImg(_self.info.codeUrl4, {
							size: parseInt(200)   
						});
						_self.$forceUpdate();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							success() {
								setTimeout(function() {
									uni.redirectTo({
										url: '/pages/my/my'
									});
								}, 2000)
							}
						});
					}
				});
			},
			showCodeFun() {
			    if(_self.selNav == 0) {
			        _self.selNav = 1;
			        _self.showCodeImg = _self.codeImg1;
			        _self.showRemark = _self.info.remark1;
			        _self.$refs.pickupCode.open();
			    } else {
			        _self.pickupCodeClose();
			    }
			},
			showRemarkFun() {
				_self.$refs.typeRemark.open();
			},
			closeRemarkFun(){
				_self.$refs.typeRemark.close();
			},
			getnav(i) {
			    _self.selNav = i;
				if(i == 1) {
					_self.showCodeImg = _self.codeImg1;
					_self.showRemark = _self.info.remark1;
				} else if (i == 2) {
					_self.showCodeImg = _self.codeImg2;
					_self.showRemark = _self.info.remark2;
				} else if (i == 3) {
					_self.showCodeImg = _self.codeImg3;
					_self.showRemark = _self.info.remark3;
				} else if (i == 4) {
					_self.showCodeImg = _self.codeImg4;
					_self.showRemark = _self.info.remark4;
				}
			    _self.$forceUpdate();
			},
			pickupCodeClose() {
			    _self.selNav = 0;
			    _self.$refs.pickupCode.close();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			if (uni.getSystemInfoSync().safeAreaInsets.top > 20) {
				_self.bottomHeight = 178;
			}
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped>
	.activityDetails {
		padding: 0 36rpx;
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.con1 {
		padding: 20rpx 0;
		display: flex;
		text-align: center;
		justify-content: center;
	}
	.con1-name {
		text-align: center;
		line-height: 54rpx;
	}
	.con1-dp {
		width: 160rpx;
		text-align: center;
		color: #fff;
		background: red;
		height: 54rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		line-height: 54rpx;
		margin-left: 60rpx;
	}
	.con1-disc {
		display: flex;
		line-height: 80rpx;
	}
	.con1-no {}
	.con1-dj {
		margin-left: 36rpx;
	}
	.con2 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 400rpx;
	}
	.con2-qrc {
		width: 300rpx;
		height: 300rpx;
	}
	.con3 {
		text-align: center;
		margin-top: 16rpx;
		padding: 20rpx;border-bottom: 2rpx solid #eaeaea;
	}
	.but-box {}
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 20rpx;
	}
	.but-box {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}

	.but1 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #2b85e4;
		color: #fff;
	}

	.but2 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #FFBC00;
		color: #fff;
	}

	.but3 {
		width: 250rpx;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: #dd6161;
		color: #fff;
	}

    
    .sign{
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	background: #FFC600;
    	position: fixed;
    	bottom: 0rpx;
    	width: 100%;
    	left: 0;
    	height: 100rpx;
    	font-weight: bold;
    	font-size: 32rpx;
    	color: #FFFFFF;
    	z-index: 9999;
    }
    .pickupCode-box {
    	width: 100vw;
        height: 100vh;
    	background: #fff;
    	border-radius: 8rpx; 
    }
    .title-i {
    	width: 100%;
        text-align: center;
        color: #333333;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 36rpx;
    }
    .img{
    	width: 480rpx;
		height: 48rrpx;
		position: relative;
		left: 50%;
		margin-left: -240rpx;
		margin-top: 30rpx;
    }
    .pickupCode-t{
    	    width: 100%;
    	    text-align: center;
    	    height: 60rpx;
    	    line-height: 60rpx;
    	    letter-spacing: 8rpx;
    	    font-size: 40rpx;
    }
    .btn{
    	    width: 100%;
    	    height: 100rpx;
    	    text-align: center;
    	    line-height: 100rpx;
    	    font-size: 32rpx;
    	    color: #333333;
    }
    .nav {
    	display: flex;
    	width: 100%;
    	height: 120upx;
    	background: #FFFFFF;
    	z-index: 200;
    	align-items: center;
    	border-bottom: 1upx rgba(204, 204, 204, 0.3) solid;
    
    	
    }
    .nav_item {
    	width: 50%;
    	text-align: center;
        
    }
    
    .hover {
    	border-bottom: 8upx rgba(251, 202, 63, 1) solid;
    	color: rgba(35, 52, 91, 1) !important;
    	font-weight: bold;
    }
    
    .nav_name {
    	padding: 0upx 10upx;
    	display: inline-flex;
    	height: 32upx;
    	font-size: 32upx;
    	color: rgba(60, 72, 104, 0.5);
    }
</style>
